<template>
  <div class="denglu">
    <backzj :mssg="aaa" />
    <div class="zhanwei"></div>
    <!-- logo -->
    <div class="logo">
        <img :src="SMDataURL+'/images/lddlg9.png'"></img>
    </div>
    <!-- logo -->
    <!-- 手机号验证 -->
    <div class="sji">
        <input type="number" class="inpt" placeholder="请输入手机号" v-model="phone">
    </div>
    <div class="yanz">
        <div class="yzma">
            <input type="text" class="inpt" placeholder="请输入验证码" v-model="yanzm">
        </div>
        <div class="yanza" v-show="!yma" @click="hquma">获取验证码</div>
        <div class="yanza" v-show="yma">获取验证码({{time}}s)</div>
    </div>
    <!-- 手机号验证 -->
    <!-- 登录 -->
    <div class="dluu" @click="dengl">登录</div>
    <div class="xiey" @click="tongyi">
        <p :class="{'yuan':!xieyi,'yuan1':xieyi}"><span :class="{'psan':!xieyi,'psan1':xieyi}"></span></p>
        <p class="ziwen">若手机账号未注册将进入注册流程，注册即为同意<span class="lan">《拼就赢用户注册协议》《拼就赢隐私政策》</span></p>
    </div>
    <!-- 登录 -->
    <!-- 其他登录 -->
    <div class="qita">
        <p class="xian"></p>
        <p class="qiqia">其它登录方式</p>
        <p class="xian"></p>
    </div>
    <!-- 其他登录 -->
    <!-- 提示 -->
    <div class="zhezhao" v-show="zzxs || zhyc"></div>
    <div class="ttip" v-show="zzxs">{{phonezz?(xieyi?'请输入验证码':'请阅读并勾选页面协议'):'请输入有效手机号'}}</div>
    <div class="ttip" v-show="zhyc">账户异常</div>
    <!-- 提示 -->
  </div>
</template>

<script>
import backzj from "../components/backzj.vue";
import MD5JS from '../utils/md5.js';
import axios from 'axios';
import store from '../store';
import {getsj} from '../api/jjj'
export default {
  components: { backzj },
  data() {
    return {
      aaa: "登录",
      DataURL: "https://e.amjhome.com/baojiayou/tts_upload",
      SMDataURL: "https://bjy.51yunkeyi.com/baojiayou/tts_upload",
      // 验证码60s样式
      yma: false,
      time: 60,
      // 用户协议
      xieyi: false,
      // 手机号
      phone: "",
      // 验证手机号
      phonezz: "",
      zzxs: false,
      // 验证码
      yanzm:'',
      // 账户异常提示
      zhyc:false,
    };
  },
  methods: {
    //   获取验证码
    hquma() {
      this.yma = true;
      const timea = setInterval(() => {
        this.time--;
        if (this.time == 0) {
          clearInterval(timea);
          this.yma = false;
          this.time = 60;
        }
      }, 1000);
      let appId = store.getters.sidebar.appId;
      let companyId=-7;
      let mobile=this.phone;
      let timestamp = Date.parse(new Date()) / 1000;
      let qm="cls=main_user&action=sendCode&companyId=" + companyId+ "&mobile=" + mobile+ "&appId=" + appId+ "&timestamp=" + timestamp;
      // 验证码接口
      if(this.phone){
        getsj('aa','bb',qm)
          .then(res=>{
            console.log(res.data)
          })
          .catch(err=>{
            console.log(err)
          })
      }
    },
    // 同意协议事件
    tongyi() {
      this.xieyi = !this.xieyi;
    },
    // 登录跳转事件
    dengl() {
      var that = this;
      let code=that.yanzm;
      let mobile=that.phone;
      let timestamp = Date.parse(new Date()) / 1000;
      let qm="cls=main_user&action=yzCode&companyId=-7" + "&mobile=" + mobile+ "&code=" + code+ "&appId=1" + "&timestamp=" + timestamp;
      // 正则手机号
      var a = that.phone;
      var b = /^1[0-9]{10}$/;
      that.phonezz = b.test(a);
      if (!b.test(a) || !that.xieyi || !that.yanzm) {
        that.zzxs = true;
        setTimeout(() => {
          that.zzxs = false;
        }, 1000);
      }
      // 登录接口
      if(that.phone && that.xieyi && that.yanzm){
        getsj('aa','bb',qm)
         .then(res=>{
          console.log(res.data.data.deleteStatus)
          // 账户异常验证
          if(res.data.data.deleteStatus==0){
            this.zhyc=true
            setTimeout(() => {
              this.zhyc = false;
            }, 1000);
          }
          if(res.data.rspCode==0 && res.data.data.deleteStatus==1){
            this.$store.dispatch('toggleUSER', res.data.data.id)
            this.$router.push('/spxiangq')
          }
        })
        .catch(err=>{
          console.log(err)
        })
      }
    }
  },
};
</script>

<style scoped>
.zhanwei {
  width: 100%;
  height: 40px;
}
/* logo */
.logo {
  width: 90px;
  height: 70px;
  margin: 30px auto;
  margin-top: 80px;
}
.logo img {
  max-width: 100%;
  max-height: 100%;
}
/* logo */
/* 手机号验证 */
.sji {
  width: 80%;
  height: 40px;
  border: 1px solid gainsboro;
  margin: 20px auto;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.inpt {
  width: 80%;
  height: 80%;
  font-size: 18px;
  margin-left: 10px;
  outline: none;
  border: none;
  background: none;
}
.yanz {
  width: 80%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px auto;
}
.yzma {
  width: 50%;
  height: 100%;
  border: 1px solid gainsboro;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.yanza {
  width: 45%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border: 1px solid gainsboro;
  border-radius: 4px;
  color: #666;
}
/* 手机号验证 */
/* 登录 */
.dluu {
  width: 80%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 6px;
  background: #428ceb;
  color: white;
  font-size: 18px;
  margin: 20px auto;
}
.xiey {
  width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
}
.yuan {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid gainsboro;
  margin-right: 4px;
}
.psan {
  display: block;
  width: 12px;
  height: 12px;
  background: gainsboro;
  border-radius: 50%;
  padding: 3px;
  box-sizing: border-box;
}
.yuan1 {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid #428ceb;
  margin-right: 4px;
}
.psan1 {
  display: block;
  width: 12px;
  height: 12px;
  background: #428ceb;
  border-radius: 50%;
  padding: 3px;
  box-sizing: border-box;
}
.ziwen {
  font-size: 12px;
  color: #555;
}
.lan {
  color: #428ceb;
}
/* 登录 */
/* 其他登录 */
.qita {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-top: 80px;
}
.xian {
  width: 25%;
  border: 1px solid gainsboro;
}
.qiqia {
  margin: 0 15px;
}
/* 其他登录 */
/* 提示 */
.ttip {
  width: 60%;
  text-align: center;
  line-height: 40px;
  height: 40px;
  background: white;
  border-radius: 12px;
  position: fixed;
  left: 20%;
  top: 48%;
  z-index: 200;
}
/* 提示 */
</style>